<template>
  <div class='form-model'>
    <div v-for="(item,index) in getFormData">
      <p v-if="item.title.show" class="head-title">
        <img :src="item.title.img" alt="" :class="item.title.class">
        <span>{{item.title.label}}</span>
      </p>
      <group class="form-one" :key="index">
        <Selector v-for="(option,index1) in item.children" v-if="option.type=='select'" :class="{'red-star':option.checked}" :placeholder="'请选择'+option.label" :title="option.label+'：'" :key="index1" v-model="formParam[option.key]" :options="option.array" @on-change="changeSelect(option)" :direction="option.align=='right'?'rtl':''"></Selector>
        
        <datetime v-else-if="option.type=='date'" :class="{'red-star':option.checked}" :placeholder="'请选择'+option.label" :title="option.label+'：'" :key="index1" v-model="formParam[option.key]" :min-year="1949"></datetime>
        
        <div v-else-if="option.type=='input'" class="input-box pr marginright60">
          <x-input :class="{'red-star':option.checked}" :placeholder="option.placeholder||('请输入'+option.label)" :title="option.label+'：'" :key="index1" v-model="formParam[option.key]" :readonly="option.readonly"></x-input>
          <span class="pa unit" v-if="option.unit">{{option.unit}}</span>
          <span class="pa unit color-gold btn-active" v-if="option.text" @click="showThis(option)">{{option.text}}</span>
          <img class="camera pa unit btn-active" v-if="option.camera" :src="img3" alt="" @click="showThis(option)">
        </div>
        
        <div v-else-if="option.type=='number'" class="input-box marginright60 pr">
          <x-input :class="{'red-star':option.checked,'paddingl10':option.paddingLeft10}" :placeholder="'请输入'+option.label+(option.otherText||'')" :title="option.label+'：'" :key="index1" v-model="formParam[option.key]" @on-change="changeNum(option.key,formParam[option.key])" :readonly="option.readonly"></x-input>
          <span class="pa unit" v-show="option.unit">{{option.unit}}</span>
        </div>

        <div v-else-if="option.type=='radio'" class="radio">
          <span :class="{fl:true,'radio-title':true,titleS:option.carstate,'red-star':option.checked}">{{option.label}}</span>
          <ul :class="{'radio-contnet':true,'sex':option.sex,carstate:option.carstate}">
            <li v-for="(radio,index2) in option.array">
              <input type="radio" :id="'radio_'+index+'_'+index1+'_'+index2" v-model="formParam[option.key]" :value="radio.key||radio.value||radio">
              <label :for="'radio_'+index+'_'+index1+'_'+index2">{{radio.label}}</label>
            </li>
          </ul>
        </div>

        <div class="check-list" v-else-if="option.type=='checkList'">
          <checklist label-position="left" :options="option.array" v-model="formParam[option.key]"></checklist>
        </div>

        <div v-else-if="option.type=='switch'" class="input-box pr switch-box">
          <span :class="{fl:true,'switch-title':true,'red-star':option.checked}">{{option.label}}：</span>
          <inline-x-switch v-model="formParam[option.key]"></inline-x-switch>
          <span :class="{pa:true,unit:true,'positionno':!formParam[option.key],'positionyes':formParam[option.key]}">{{formParam[option.key]?"是":"否"}}</span>
        </div>

        <div v-else-if="option.type=='menulist'" class="input-box pr menulist-box">
          <ul>
            <li v-for="(list,index3) in option.array" class="btn-active">
              <p class="color999 pr" @click="showReportD(option,index3)"><span>{{index3 | formatIndex}}、 {{list.label}}</span> <img class="fr pa" :src="img2" alt=""></p>
            </li>
          </ul>
        </div>

        <div v-else-if="option.type=='imgs'&&formParam[option.key]&&formParam[option.key].length>0" class="input-box pr imgs-box">
          <ul>
            <li v-for="(list,index3) in formParam[option.key]" class="pr">
              <span class="pa btn-active delete" @click="deleteThis(option,index3)">x</span>
              <img :src="list" alt="">
            </li>
          </ul>
        </div>

      </group>
    </div>
  </div>
</template>
<script>
import { Group,Selector,XInput,Datetime,Checklist ,InlineXSwitch} from 'vux'
export default {
  props:["formData","formParam"],
  components: {Group,Selector,XInput,Datetime,Checklist,InlineXSwitch },
  name: "",
  data() {
    return {
      hourListValue:"",
      img:require('../../assets/img/hpmepage/renew/choose.png'),
      img2:require('../../assets/img/vip/center/8.png'),
      img3:require("../../assets/img/vip/center/9.png")
    };
  },
  computed:{
    getFormData(){
      return this.formData||[]
    }
  },
  methods: {
    showThis(item){
      item.textClick(item)
    },

    showReportD(item,index3){
      if(item.click)item.click(item,index3)
    },

    // 删除图片
    deleteThis(item,index){
      item.array.splice(index,1)
    },

    changeNum(key,val){
      // this.$store.state.dialogs.alert.content=val
      // this.$store.state.dialogs.alert.show=true
      console.log("test")
    },

    changeSelect(item){
      if(item.select)item.select(item)
    }
  },
  filters:{
    formatIndex(val){
      var upArray=["①","②","③","④","⑤","⑥","⑦","⑧"]
      return upArray[val]
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.form-model {
  font-size: 14px;
  background-color:#F2F2F2;

  .head-title{
    height:50px;
    line-height: 50px;
    background-color:#fff;

    img{
      margin: 16px 10px 16px 15px;
      width: 18px;
      height: 18px;
      float: left;
      vertical-align: middle;
    }
    span{
      font-size: 16px;
      vertical-align: middle;
    }
  }

  >div:nth-child(n+2){
    margin-top: 5px;
  }
}
.input-box{
  border-top: 1px solid #f0f0f0;
  box-sizing: border-box;
  margin-left: 15px;
  min-height: 40px;
  width: calc(100% - 15px)!important;

  .unit{
    top: 0;
    right: 0;
    margin-right: 15px;
    line-height: 40px;

    
  }
  .camera{
      width: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
  
}
.switch-box{
  >span.switch-title{
    line-height: 40px;
    min-width: 85px;
  }
  >span.positionno{
    left: 119px;
    font-size: 12px;
    width: 0px;
    color: #999;
  }
  >span.positionyes{
    left: 91px;
    width: 0px;
    font-size: 12px;
    color: #fff;
  }
}
.radio{
  height: 40px;
  border-top: 1px solid #f0f0f0;
  box-sizing: border-box;
  padding: 0 15px;
  line-height: 40px;
  

  .radio-title{
    max-width: 150px;
  }
  .titleS{
    padding-left: 10px;
  }

  .radio-contnet{
    margin-left: 150px;
    display: flex;
    justify-content: space-around;

    li:nth-child(1){
      margin-right: 10px;
    }

    input[type='radio']{
      visibility: hidden;
    }
    input[type='radio']:checked+label::before{
      content: "";
      display: inline-block;
      width: 15px;
      height: 15px;
      background: url(../../assets/img/hpmepage/renew/choose_1.png);
      background-size: 100% 100%;
    }

    label::before{
      content: "";
      background: url(../../assets/img/hpmepage/renew/choose.png);
      background-size: 100% 100%;
      width: 15px;
      height: 15px;
      position: absolute;
      box-sizing: border-box;
      left: -20px;
      top: 50%;
      transform: translateY(-50%);
    }

    label{
      color: #999;
      position: relative;
    }
  }
  .radio-contnet.sex{
    margin-left: 85px;
    justify-content: flex-start;
  }
  .radio-contnet.carstate{
    // display: block;
    margin-left: 0;
  }

  
}

@media screen and (max-width: 350px) {
  .radio-contnet{
    margin-left: 130px!important;
  }
}
.check-list{
  box-sizing: border-box;
  padding-left: 15px;
}
.menulist-box{
  line-height: 40px;

  li{
    border-bottom: 1px solid #f2f2f2;
  }

  img{
    width: 15px;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
  }
}
.imgs-box{

  ul{
    display: flex;
    flex-wrap: wrap;

    li{

      padding: 5px 0;
      width: 20%;
      margin-right: 5px;
      min-height: 40px;

      img{
        display: inline-block;
        width: 100%;
        height: 100%;
      }

      .delete{
        color: #fff;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        line-height: 10px;
        font-size: 10px;
        background-color: red;
        right: 1px;
        top: 6px;
        opacity: .5;
      }

    }
  }
}
</style>